<template>
   <div class="footer">
       <!-- 城市 -->
       <div class="footer-top">
           <span>城市:</span>
           <i class="iconfont icondingwei"></i>
           <span>西安</span>
       </div>
       <!-- 链接 -->
       <div class="footer-middle">
           <div class="link" v-for="item in linkList" :key="item.title">
               {{item.title}}
           </div>
       </div>
       <!-- 网站底部备案信息-中国工信部 -->
       <div class="footer-bottom">
           &copy;2020美团网&nbsp;京ICP证070791号
       </div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               linkList:[
                   {title:'首页',href:'/'},
                   {title:'我的',href:'/'},
                   {title:'美团下载',href:'/link'},
                   {title:'电脑版',href:'/'},
                   {title:'帮助',href:'/'},
               ]
           }
       }
   }
</script>
   
<style scoped lang="less">
   .footer{
       margin-top: .4rem;
       padding: .4rem .266667rem .533333rem;/**3个值：上、左右、下 */
       height: auto;
       background: white;
       .footer-top{
           text-indent: 2em;
           & span:nth-of-type(1){
               color: #999;
               font-size: .346667rem;
           }
           i{
               font-size: .36rem;
               color: #FFD000;
           }
           & span:nth-of-type(2){
               font-size: .346667rem;
               color:#222;
           }
       }
       .footer-middle{
           display: flex;/**弹性布局 */
           padding:0 .133333rem;
           margin: .533333rem 0;
           .link{
               width: 20%;
               text-align: center;
               font-size: .293333rem;
               color:#Fe8C00;
               border-right: 1px solid #636260;
           }
           /*伪类选择器first-child第一个、last-child最后一个*/
           & .link:last-child{
               border-right: none;
           }
       }
       .footer-bottom{
           text-align: center;
           font-size: .346667rem;
           color: #999;
           line-height: .533333rem;
           position: relative;/**给父级---添加相对定位 */
           /*在之后插入*/
           &::after{
               content: '';
               display: block;
               height: 1px;
               width: 20%;
               background: #999;
               position: absolute;
               left: 2%;
               top: 50%;
           }
           /*在之前插入*/
           &::before{
               content: '';
               display: block;
               height: 1px;
               width: 20%;
               background: #999;
               position: absolute;
               right: 2%;
               top: 50%;
           }
       }
   }
</style>